<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onBeforeMount, onUnmounted } from 'vue'

import { fillInFriend, userInfoFull } from '@/libs/user'
import { imagePath } from '@/libs/file-utils'
import { getDate } from '@/libs/common'
import { genderList, gender, nickname, groupList, groupIdx, birthday, year, month, day, birthtime, place, placeStr, mbtiList, curMBTIIdx, curFriend } from './data'
import { init, confirm, clear } from './data'

const img_bg = imagePath('user/edit-info/bg.jpg')
const img_header = imagePath('user/edit-info/header.png')
const img_wrapper = imagePath('user/edit-info/wrapper.png')
const icon_arrow = imagePath('icon-arrow.svg')
const btn_bg = imagePath('user/edit-info/btn-bg.png')

const startDate = getDate(-150)
const endDate = getDate()

onBeforeMount(init)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="user-edit-info"
    :pageStyle="{ backgroundImage: img_bg }"
    :showBack="userInfoFull"
  >
    <div
      class="header"
      :style="{ backgroundImage: img_header }"
    ></div>

    <div
      class="wrapper"
      :style="{ backgroundImage: img_wrapper }"
    >
      <div class="gender-box">
        <div
          v-for="(item, index) in genderList"
          :key="index"
          class="item"
          :style="{ backgroundImage: item.img }"
          @click="gender = item.value"
        >
          <div class="title">
            <div
              class="icon"
              :class="{ active: item.value === gender }"
            ></div>
            {{ item.name }}
          </div>
        </div>
      </div>

      <div class="data-box">
        <input
          class="input-style nickname"
          placeholder="请输入姓名"
          placeholder-style="color: rgba(0, 0, 0, 0.36);"
          v-model="nickname"
        />

        <picker
          v-if="fillInFriend || curFriend"
          class="picker"
          mode="selector"
          :range="groupList"
          range-key="groupName"
          :value="groupIdx"
          @change="groupIdx = $event.detail.value"
        >
          <div
            class="input-style group"
            :class="{ deactive: groupIdx === -1 }"
          >
            {{ groupList[groupIdx]?.groupName || '关系' }}
            <div
              class="arrow"
              :style="{ backgroundImage: icon_arrow }"
            ></div>
          </div>
        </picker>
      </div>

      <div class="data-box-title">出生时间（公历）</div>

      <div class="data-box">
        <picker
          class="picker"
          mode="date"
          :value="birthday"
          :start="startDate"
          :end="endDate"
          @change="birthday = $event.detail.value"
        >
          <div class="input-style date">
            {{ year }}年{{ month }}月{{ day }}日

            <div
              class="arrow"
              :style="{ backgroundImage: icon_arrow }"
            ></div>
          </div>
        </picker>
        <picker
          class="picker"
          mode="time"
          :value="birthtime"
          @change="birthtime = $event.detail.value"
        >
          <div class="input-style time">
            {{ birthtime }}

            <div
              class="arrow"
              :style="{ backgroundImage: icon_arrow }"
            ></div>
          </div>
        </picker>
      </div>

      <!-- #ifdef MP-WEIXIN -->
      <div class="data-box-title">出生地点</div>

      <picker
        class="picker"
        mode="region"
        :value="place"
        @change="place = $event.detail.value"
      >
        <div class="data-box">
          <div
            class="input-style place"
            :class="{ deactive: !placeStr }"
          >
            {{ placeStr || '请选择' }}
            <div
              class="arrow"
              :style="{ backgroundImage: icon_arrow }"
            ></div>
          </div>
        </div>
      </picker>
      <!-- #endif -->

      <template v-if="fillInFriend || curFriend">
        <div class="data-box-title">MBTI</div>

        <picker
          class="picker"
          mode="selector"
          :range="mbtiList"
          :value="curMBTIIdx"
          @change="curMBTIIdx = $event.detail.value"
        >
          <div class="data-box">
            <div
              class="input-style place"
              :class="{ deactive: curMBTIIdx === -1 }"
            >
              {{ mbtiList[curMBTIIdx] || '请选择' }}
              <div
                class="arrow"
                :style="{ backgroundImage: icon_arrow }"
              ></div>
            </div>
          </div>
        </picker>
      </template>

      <div
        class="confirm"
        :style="{ backgroundImage: btn_bg }"
        @click="confirm()"
      >{{ fillInFriend || curFriend ? '确定并返回' : '继续打蒜' }}</div>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.header {
  width: 308rpx;
  height: 132rpx;

  margin-top: 16rpx;
  margin-left: 32rpx;

  background-size: 100% 100%;
}

.wrapper {
  width: 730rpx;
  // height: 1200rpx;
  margin: 16rpx auto;

  padding-bottom: 20rpx;

  background-size: 100% 100%;

  .gender-box {
    width: 100%;

    box-sizing: border-box;
    padding: 16rpx 36rpx 90rpx;

    display: flex;
    justify-content: space-between;

    .item {
      position: relative;
      width: 306rpx;
      height: 396rpx;

      background-size: 100% 100%;

      .title {
        position: absolute;
        top: calc(100% + 10rpx);
        left: 50%;
        transform: translateX(-50%);

        display: flex;

        color: #310257;
        font-size: 48rpx;
        line-height: 48rpx;
        text-shadow: 0 0 4rpx #fff, 0 0 4rpx #fff, 0 0 4rpx #fff;

        .icon {
          position: relative;
          width: 48rpx;
          height: 48rpx;

          margin-right: 16rpx;

          box-sizing: border-box;
          padding: 6rpx;
          border: 2rpx solid #8B41FF;
          border-radius: 50%;

          display: flex;
          justify-content: center;
          align-items: center;

          &::after {
            content: '';

            width: 100%;
            height: 100%;

            border-radius: 50%;
            background-color: #8B41FF;

            opacity: 0;
          }

          &.active::after {
            opacity: 1;
          }
        }
      }
    }
  }

  .data-box-title {
    padding: 8rpx 66rpx;

    color: #7336D6;
    font-size: 32rpx;
    line-height: 48rpx;
  }

  .data-box {
    position: relative;
    width: 608rpx;
    height: 90rpx;

    margin: 0 auto;

    display: flex;
    align-items: center;

    .nickname {
      flex: 1;
    }

    .group {
      width: 266rpx;

      margin-left: 16rpx;
    }

    .date {
      width: 320rpx;
    }

    .time {
      width: 180rpx;

      margin-left: 20rpx;
    }

    .place {
      flex: 1;
    }

    .input-style {
      position: relative;
      height: 90rpx;

      box-sizing: border-box;
      padding: 0 28rpx;
      border-radius: 30rpx;

      outline: none;
      border: none;

      color: #000;
      font-size: 32rpx;
      line-height: 90rpx;

      background-color: #FDF7FF;
      box-shadow: 0 -8rpx 8rpx 0 rgba(229, 185, 255, 0.55) inset, 0 8rpx 3rpx 0 #FFF inset, 0 0 10rpx 0 #EF82FF inset;

      &.deactive {
        color: #0005;
      }
    }

    .arrow {
      position: absolute;
      right: 26rpx;
      top: 50%;
      transform: translateY(-50%)rotateZ(90deg);

      width: 28rpx;
      height: 28rpx;

      background-size: 100% 100%;
    }
  }

  .confirm {
    width: 450rpx;
    height: 148rpx;
    margin: 46rpx auto;

    background-size: 100% 100%;

    color: #8A41FF;
    text-align: center;
    font-size: 40rpx;
    line-height: 140rpx;
  }
}
</style>